<!-- 递归渲染已实现，但插槽无法传递到最底层叶子节点，后续寻找解决方案，暂时不启用 -->
<template>
  <el-table-column v-if="columnItem.slotName" v-bind="columnItem">
    <template slot-scope="scope">
      <component :is="scope.slotComponent" v-bind="{row: scope.row, $index: scope.$index, option: columnItem}"></component>
    </template>
  </el-table-column>

  <el-table-column v-else v-bind="columnItem" :header-align="columnItem.children && columnItem.children.length > 0 ? 'center' : ''">
    <template v-if="columnItem.children && columnItem.children.length">
      <nested-table-column v-for="(childColumnItem, childColumnIndex) in columnItem.children" :key="childColumnIndex" :columnItem="childColumnItem" />
    </template>
  </el-table-column>
</template>
<script>
export default {
  name: 'nested-table-column',
  props: {
    columnItem: { type: Object }
  }
}
</script>
